<script setup>
import {ref} from 'vue'
import Right1 from './right1.vue'
import Requesting from './requesting.vue'
import No01 from './no01.vue'
import No02 from '../delay/no02.vue'
import ReviewIng from '../delay/review-ing.vue'
import Right02 from '../delay/right02.vue'

let time = ref(0);

const timeStop = setInterval(() => {
  time.value = time.value + 1;
  console.log(time.value);
  if (time.value == 30) {
    clearInterval(timeStop)
  }
}, 1000)
</script>

<template>
  <view v-if="time < 5 && time >= 0">
    <requesting></requesting>
  </view>
  <view v-if="time < 10 && time >= 5">
    <Right1></Right1>
  </view>
  <view v-if="time < 15 && time >= 10">
    <No01></No01>
  </view>
  <view v-if="time < 20 && time >= 15">
    <ReviewIng></ReviewIng>
  </view>
  <view v-if="time < 25 && time >= 20">
    <Right02></Right02>
  </view>
  <view v-if="time <= 30 && time >= 25">
    <No02></No02>
  </view>
</template>

<style scoped>
#background {
  display: flex;
  justify-content: center;
}
</style>